<template>
  <div>
    <el-card class="mained">
      <!-- 游戏选择 -->
      <!-- one -->
      <div>
        <div class="box">
          <div class="one">
            <div class="nav">
              <div>虞都游戏名称：</div>
              <div>
                <el-select
                  v-model="queryParams.gameId"
                  placeholder="请选择游戏"
                  size="small"
                  clearable
                  filterable
                  @change="changfn"
                >
                  <el-option
                    v-for="dict in gameList"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                  />
                </el-select>
              </div>
            </div>
          </div>
          <div class="one" style="margin-left: 33px">
            <div class="nav">
              <div>{{ Name }}游戏名称：</div>
              <div>
                <el-select
                  v-model="queryParams.interGameId"
                  placeholder="请选择游戏"
                  size="small"
                  clearable
                  filterable
                  @change="changeONe"
                >
                  <el-option
                    v-for="dict in otherList"
                    :key="dict.id"
                    :label="dict.gameName"
                    :value="dict.id"
                  />
                </el-select>
              </div>
            </div>
          </div>
          <div class="" style="margin-left: 50px">
            <el-button
              style="background-color: #942d9b; border: 1px solid #942d9b"
              @click="xiayibu"
              type="primary"
              >查询</el-button
            >
          </div>
          <!-- 一键匹配多选属性 -->
          <div class="" style="margin-left: 18px">
            <el-button
              style="background-color: #942d9b; border: 1px solid #942d9b"
              @click="OneclickcheckBox"
              type="primary"
              >一键匹配</el-button
            >
          </div>
        </div>
      </div>
      <!-- four -->
      <div>
        <!-- 属性匹配 -->
        <div class="box" style="padding-top: 30px">
          <div class="one two" style="padding: 0 10px">
            <!-- <div class="title">虞都属性</div> -->
            <div class="">
              <div
                style="
                  font-size: 18px;
                  padding-bottom: 20px;
                  color: #942d9b;
                  font-weight: 600;
                "
              >
                虞都多选属性
              </div>
              <div>
                <el-table
                  v-if="refreshTable"
                  :row-key="rowKeyAttr"
                  :default-expand-all="isExpandAll"
                  :data="YdCheckBoxAttr"
                  :tree-props="{
                    children: 'childAttributes',
                    hasChildren: 'hasChildren',
                  }"
                  border
                  height="calc(100vh - 290px)"
                >
                  <el-table-column
                    label="属性编号"
                    width="188px"
                    align="left"
                    prop="id"
                  />
                  <el-table-column label="属性名称" align="" prop="fieldName" />
                </el-table>
              </div>
            </div>
          </div>
          <div class="one three" style="padding: 0 10px">
            <!-- <div class="title">氪金兽属性</div> -->
            <div class="">
              <div
                style="
                  font-size: 18px;
                  padding-bottom: 20px;
                  color: #942d9b;
                  font-weight: 600;
                "
              >
                {{ Name }}多选属性（未匹配属性:<span
                  style="font-size: 21px; color: red"
                  >{{
                    Number(KJSCheckBoxAttr.length - weipipeishuxingList.length)
                  }}</span
                >
                &nbsp;已匹配属性：<span style="font-size: 21px; color: red">{{
                  weipipeishuxingList.length
                }}</span
                >）
              </div>
              <div>
                <el-table
                  v-if="refreshTable"
                  :row-key="rowKeyFuncOne"
                  :default-expand-all="isExpandAll"
                  :data="KJSCheckBoxAttr"
                  :tree-props="{
                    children: 'interCheckBoxReqs',
                    hasChildren: 'hasChildren',
                  }"
                  border
                  height="calc(100vh - 290px)"
                >
                  <el-table-column
                    label="属性编号"
                    width="126px"
                    align="left"
                    prop="id"
                  />
                  <el-table-column label="属性名称" align="" prop="name" />
                  <el-table-column label="是否必填" align="" prop="required">
                    <template #default="{ row }">
                      <div v-if="row.required == true" style="color: red">
                        必填项
                      </div>
                      <div v-else style="color: green">不是必填项</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="设置默认值"
                    align=""
                    prop="defaultValue"
                  />
                  <el-table-column
                    label="虞都属性Id"
                    align=""
                    prop="YdConfigId"
                  />
                  <el-table-column
                    label="虞都属性名称"
                    align=""
                    prop="YdConfigName"
                  />
                  <el-table-column
                    label="操作"
                    align=""
                    class-name="small-padding fixed-width"
                    width="110"
                  >
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        :class="{
                          active: scope.row.flag == true || scope.row.type,
                        }"
                        @click="handleUpdatecheckBox(scope.row)"
                        >匹配</el-button
                      >
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-thumb"
                        style="color: red"
                        @click="SetUPCheckBox(scope.row)"
                        >设置默认值</el-button
                      >
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-refresh-left"
                        @click="chongzhiCheckBox(scope.row, scope.$index)"
                        >重置</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>

        <!-- 保存多选属性 -->
        <div class="gameBtn">
          <el-button
            style="background-color: #942d9b; border: 1px solid #942d9b"
            @click="baocunCheckBoxAttr"
            type="primary"
            >保存多选属性</el-button
          >
        </div>
      </div>
    </el-card>
    <!-- 编辑多选 -->
    <el-dialog
      title="编辑信息"
      :visible.sync="dialogFormVisiblecheckBox"
      @close="closecheckBox"
    >
      <el-form :model="checkBoxform" label-width="100px">
        <el-form-item label="虞都属性">
          <el-cascader
            style="width: 555px"
            v-model="selectedRadioCheckBox"
            :options="YdCheckBoxAttr"
            :props="{
              multiple: true,
              checkStrictly: true,
              value: 'id',
              label: 'fieldName',
              children: 'childAttributes',
            }"
            @change="handleChangeCheckBox"
            clearable
            filterable
            :show-all-levels="false"
          ></el-cascader>
        </el-form-item>
        <!-- <el-form-item label="虞都属性名称">
          <el-input
            v-model="checkBoxform.YdConfigName"
            placeholder="请输入属性名称"
            autocomplete="off"
          ></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closecheckBox">取 消</el-button>
        <el-button type="primary" @click="okSurecheckBox">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import gameListApi from "@/api/gameConfig/gameList";
import { BaocunCheckBoxAttrInfo, listInfo, getQufuList, YDAttr, KJSAttr, getBaocunAttrInfo } from '../../api/AttributeCorrectionCheckBox/index'
export default {
  data() {
    return {
      weipipeishuxingList: [],
      gameList: [],
      Name: null,
      selectedRadioCheckBox: [],
      queryParams: {
        gameId: null,
        gameName: null,
        interGameId: null,
        interGameName: null,
        config: null
      },
      form: {
        YdServeId: null,
        YdServeName: null,
      },
      checkBoxform: {
        YdConfigId: null,
        YdConfigName: null
      },
      dialogFormVisiblecheckBox: false,
      otherList: [],
      YdCheckBoxAttr: [],
      KJSCheckBoxAttr: [],
      refreshTable: true,
      isExpandAll: false,
      itemObjcheckBox: {},
      AllInfoList: {}
    }
  },
  created() {
    const data = this.$route.query
    console.log('data', data);
    this.Name = data.Name
    this.queryParams.config = data.Id
    this.getGameList()
    this.getOtherList()
  },
  methods: {
    ////////////////////////////////////////多选
    handleChangeCheckBox(value) {
      console.log('33333', value);
      let arr = []
      value.forEach(item => {
        console.log('item', item);
        arr.push(item.slice(-1)[0])
      })
      console.log("arrrrr", arr);

      // 提取并输出ID和名称
      const ids = [];
      const names = [];
      arr.forEach(path => {
        console.log('path', path);
        const node = this.findNodeByIdCheckBox(this.YdCheckBoxAttr, path);
        console.log('3333333', node);
        if (node) {
          ids.push(node.id);
          names.push(node.fieldName);
        }
      })

      console.log('选中的ID:', ids);
      this.checkBoxform.YdConfigId = ids.join(', ')
      console.log('选中的名称:', names);
      this.checkBoxform.YdConfigName = names.join(', ')
    },
    findNodeByIdCheckBox(nodes, id) {
      console.log('123', nodes, id);
      for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].id === id) {
          return nodes[i];
        }
        if (nodes[i].childAttributes && nodes[i].childAttributes.length > 0) {
          const found = this.findNodeByIdCheckBox(nodes[i].childAttributes, id);
          if (found) {
            return found;
          }
        }
      }
      return null;
    },


    //多选设置默认值
    SetUPCheckBox(item) {
      console.log('item', item);
      item.defaultValue = item.id
      this.refreshTable = false;
      this.isExpandAll = false;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },

    //多选选择重置
    chongzhiCheckBox(item, index) {
      console.log('item', item);
      console.log('index', index);
      item.InterConfigId = null;
      item.InterConfigName = null;
      item.YdConfigId = null;
      item.YdConfigName = null;
      this.$set(this.KJSCheckBoxAttr[index], 0, item);
    },

    rowKeyFunc(row) {
      // console.log('66666666', row);
      if (row.childGameAttributes != null) {
        return row.uuid + 'only';
      }
      return row.uuid
    },
    rowKeyAttr(row) {
      if (row.id) {
        return row.id;
      }
      return row.id
    },
    rowKeyFuncOne(row) {
      //   console.log('66666666', row);
      if (row.interServerRes) return row.id + 'onlyTwo';
      return row.id;
    },
    // tableCellStyle({ row, column, rowIndex, columnIndex }) {
    //   //   console.log('row', row);
    //   //   console.log('column', column);
    //   //   console.log('rowIndex', rowIndex);
    //   //   console.log('columnIndex', columnIndex);
    //   const fieldLabel = row.flag;
    //   if (fieldLabel == true) {
    //     return { 'background-color': '#942d9b', 'color': '#fff' };
    //   }
    // },
    // 游戏列表
    getGameList() {
      gameListApi.getGameList().then((res) => {
        this.gameList = res.rows;
      });
    },
    getOtherList() {
      listInfo(this.queryParams.config).then((res) => {
        this.otherList = res.data;
      });
    },
    async xiayibu() {
      this.getbaocunInfoList()
    },
    changfn(e) {
      const obj = this.gameList.filter(item => item.id == e)
      console.log(obj);
      this.queryParams.gameName = obj[0].name
    },
    changeONe(e) {
      const obj = this.otherList.filter(item => item.id == e)
      console.log(obj);
      this.queryParams.interGameName = obj[0].gameName
    },
    ///////////////////////////多选
    //获取保存的属性
    async getbaocunInfoList() {
      let obj = {}
      obj.gameId = this.queryParams.gameId
      obj.config = this.queryParams.config
      const res = await getBaocunAttrInfo(obj)
      console.log(res);
      if (res.code == 200) {
        this.AllInfoList = res.data
        this.getcheckBoxYdAttr()
        this.getcheckBoxotherAttr()
      }
    },
    //获取于都属性
    async getcheckBoxYdAttr() {
      let obj = {}
      obj.gameId = this.queryParams.gameId
      obj.type = 2
      const res = await YDAttr(obj)
      console.log('res', res);
      this.YdCheckBoxAttr = res.data
    },
    //获取其他属性
    async getcheckBoxotherAttr() {
      let obj = {}
      obj.config = this.queryParams.config
      obj.gameId = this.queryParams.interGameId
      obj.type = 2
      const res = await KJSAttr(obj)
      console.log('res', res);
      res.data.forEach(item => {
        item.interCheckBoxReqs = item.interServerRes
      })
      this.weipipeishuxingList = []

      if (this.AllInfoList.checkOther) {
        res.data.forEach(item => {
          this.AllInfoList.checkOther.interCheckBoxReqs.forEach(dict => {
            if (item.id == dict.id && dict.YdConfigId && dict.YdConfigName || item.id == dict.id && dict.defaultValue) {
              item.YdConfigId = dict.YdConfigId
              item.YdConfigName = dict.YdConfigName
              item.InterConfigId = dict.InterConfigId
              item.InterConfigName = dict.InterConfigName
              item.defaultValue = dict.defaultValue
              this.weipipeishuxingList.push(dict)
            }
          })
        })
      }
      this.KJSCheckBoxAttr = res.data

      this.refreshTable = false;
      this.isExpandAll = false;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
    //一键获取多选属性
    OneclickcheckBox() {
      this.weipipeishuxingList = []
      const myList = this.YdCheckBoxAttr
      const otherList = this.KJSCheckBoxAttr
      myList.forEach(item => {
        otherList.forEach(dict => {
          if (item.fieldName == dict.name) {
            dict.YdConfigId = item.id
            dict.YdConfigName = item.fieldName
            dict.InterConfigId = dict.id
            dict.InterConfigName = dict.name
            this.weipipeishuxingList.push(dict)
            // console.log('333', dict);
            // item.flag = true
            // dict.flag = true
          }

          // if (item.childAttributes && item.childAttributes.length != 0) {
          //   item.childAttributes.forEach(i => {
          //     if (dict.interCheckBoxReqs && dict.interCheckBoxReqs.length != 0) {
          //       dict.interCheckBoxReqs.forEach(s => {
          //         if (i.fieldName == s.name) {
          //           s.YdConfigId = i.id
          //           s.YdConfigName = i.fieldName
          //           s.InterConfigId = s.id
          //           s.InterConfigName = s.name
          //           console.log('sss', s);
          //           s.flag = true
          //           i.flag = true
          //         }
          //       })
          //     }
          //   })
          // }

        })
      })

      this.refreshTable = false;
      this.isExpandAll = false;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
    //修改本地数据-多选
    handleUpdatecheckBox(item) {
      const ddd = document.querySelector('.mained')
      ddd.style.width = '1288px'
      console.log('item', item);
      this.selectedRadioCheckBox = []
      this.itemObjcheckBox = item
      this.dialogFormVisiblecheckBox = true
      this.checkBoxform.YdConfigId = item.YdConfigId
      this.checkBoxform.YdConfigName = item.YdConfigName
    },
    //清楚单选表单
    closecheckBox() {
      this.dialogFormVisiblecheckBox = false
      this.checkBoxform = {
        YdConfigId: null,
        YdConfigName: null
      }
    },
    //确认多选-1
    okSurecheckBox() {
      this.weipipeishuxingList = []
      this.itemObjcheckBox.YdConfigId = this.checkBoxform.YdConfigId
      this.itemObjcheckBox.YdConfigName = this.checkBoxform.YdConfigName
      this.itemObjcheckBox.InterConfigId = this.itemObjcheckBox.id
      this.itemObjcheckBox.InterConfigName = this.itemObjcheckBox.name
      const myList = this.YdCheckBoxAttr
      const otherList = this.KJSCheckBoxAttr
      this.dialogFormVisiblecheckBox = false
      this.$set(this.KJSCheckBoxAttr, this.itemObjcheckBox.id + 'qwer', this.itemObjcheckBox);
      myList.forEach(item => {
        otherList.forEach(dict => {
          // item.fieldName == dict.name && 
          if (item.id == dict.YdConfigId) {
            this.weipipeishuxingList.push(dict)
            // item.flag = true
            // dict.flag = true
          }

          // if (item.childAttributes && item.childAttributes.length != 0) {
          //   item.childAttributes.forEach(i => {
          //     if (dict.interCheckBoxReqs && dict.interCheckBoxReqs.length != 0) {
          //       dict.interCheckBoxReqs.forEach(s => {
          //         if (i.fieldName == s.name || s.YdConfigId == i.id) {
          //           s.flag = true
          //           i.flag = true
          //         }
          //       })
          //     }
          //   })
          // }
        })
      })
      const ddd = document.querySelector('.mained')
      ddd.style.width = '1290px'
    },
    //保存多选属性
    async baocunCheckBoxAttr() {
      let obj = {}
      obj.config = this.queryParams.config
      obj.ydGameId = this.queryParams.gameId
      obj.interGameId = this.queryParams.interGameId
      obj.interGameName = this.queryParams.interGameName
      obj.interCheckBoxReqs = JSON.stringify(this.KJSCheckBoxAttr)
      const res = await BaocunCheckBoxAttrInfo(obj)
      console.log(res);
      if (res.code == 200) {
        this.$message.success('保存成功！')
        this.$router.push('/api/index/channelList')
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.mained {
  width: 1289px;
}
.main {
  width: 100%;
  display: flex;
  .titleOne {
    width: 50%;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    padding-bottom: 30px;
    color: #942d9b;
  }

  .one {
    width: 37%;
  }

  .two {
    width: 63%;
  }
}

.box {
  width: 100%;
  display: flex;
  .one {
    // width: 50%;
    text-align: center;
    .title {
      font-size: 26px;
      font-weight: bold;
      padding-bottom: 30px;
      color: #942d9b;
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .two {
    width: 37%;
  }

  .three {
    width: 63%;
  }
}

.gameBtn {
  padding: 26px 0;
  text-align: center;
}

::v-deep .el-table__row.el-table__row--level-0 {
  background-color: #eae7e7;

  .el-table_2_column_5.el-table__cell {
    background-color: #eae7e7;
  }
}
</style>